<template>
  <div class="headline">
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
      <div class="groupbox flex row_bet">
        <div class="card_title">
          活动标题
        </div>
        <a-button icon="plus" @click="drawershow = true" class="br4" style="margin-bottom:8px;">
          添加标题
        </a-button>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.id"
        :dataSource="activity"
        :loading="loading"
        :pagination="false"
      >
        <!--        @change="handleTableChange"-->
        <div slot="shopurl" slot-scope="text,row">
          <div class="line-3" style="width: 288px;">{{ row.shopurl }}</div>
        </div>
        <div slot="active" slot-scope="row">
          <a-button type="link" @click="doedit(row)">编辑</a-button>
          <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="dodel(row)">
            <template slot="title">
              确认删除吗?
            </template>
            <a-button type="link" style="color:red">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </a-card>
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
      <div class="groupbox flex row_bet">
        <div class="card_title">
          敏感词替换
        </div>
        <a-button icon="plus" @click="drawershow2 = true" class="br4" style="margin-bottom:8px;">
          添加规则
        </a-button>
      </div>
      <a-table
        :columns="columns2"
        :rowKey="activity2 => activity2.id"
        :dataSource="activity2"
        :loading="loading2"
        :pagination="false"
      >
        <!--        @change="handleTableChange"-->
        <div slot="shopurl" slot-scope="text,row">
          <div class="line-3" style="width: 288px;">{{ row.shopurl }}</div>
        </div>
        <div slot="active" slot-scope="row">
          <a-button type="link" @click="doedit(row,2)">编辑</a-button>
          <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="dodel(row,2)">
            <template slot="title">
              确认删除吗?
            </template>
            <a-button type="link" style="color:red">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </a-card>
    <a-drawer
      title="添加标题"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">填写活动标题</div>
        <a-input v-model="form.title" placeholder="填写标题名称" class="chooseipt br4"/>
        <div style="width:315px; color:red;">
          标题加上“[名称]”即可自动替换成 用户名+编号。
          例如：实力团长，火爆招商[名称]
        </div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            style="float:left;"
            :disabled="btnloading"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'添加中...':'确 认 添 加' }}
          </a-button>
        </div>
      </div>
    </a-drawer>
    <a-drawer
      title="添加规则"
      :width="513"
      :visible="drawershow2"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">原来关键字</div>
        <a-input v-model.number="form2.keyWord" placeholder="原来违规关键字" class="chooseipt br4"/>
        <div class="titles">替换关键字</div>
        <a-input v-model.number="form2.keyWord_b" placeholder="替换成目标的关键字" class="chooseipt br4"/>

        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button type="primary" style="float:left;" :loading="btnloading" class="br4" @click="dosubmit(2)">
            确 认 添 加
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import {
    doaddactworld,
    doaddteminfo,
    doDelactworld,
    doDelHeadline,
    doEditHeadline,
    doUpdateactworld,
    getHeadlineList,
    getWorldList
  } from '@/api/teamApi'
  import moment from 'moment'

  export default {
    name: 'Headline',
    data () {
      return {
        moment,
        drawershow: false,
        drawershow2: false,
        form: {
          title: ''
        },
        form2: {
          keyWord_b: '',
          keyWord: ''
        },
        columns: [
          {
            title: 'ID',
            align: 'left',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '标题',
            align: 'left',
            dataIndex: 'title',
            scopedSlots: {
              customRender: 'title'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        columns2: [
          {
            title: 'ID',
            align: 'left',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '原来关键字',
            align: 'center',
            dataIndex: 'keyWord',
            scopedSlots: {
              customRender: 'keyWord'
            }
          },
          {
            title: '替换关键字',
            align: 'center',
            dataIndex: 'keyWord_b',
            scopedSlots: {
              customRender: 'keyWord_b'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   id: 1500, // id
          //   title: '重点对接活动xy[名称]' // 标题
          // }
        ],
        activity2: [
          // {
          //   id: 7, // 自增id
          //   keyWord: 'QQ', // 替换关键词
          //   keyWord_b: '*' // 被替换关键词
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        value: '',
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getHeadlineList()
      this.getWorldList()
    },
    mounted () {
    },
    methods: {
      doedit (row, val) {
        console.log(row)
        if (val === 2) {
          this.form2 = row
          this.drawershow2 = true
        } else {
          this.form = row
          this.drawershow = true
        }
      },

      onClose () {
        this.form = {}
        this.form2 = {}
        this.drawershow = false
        this.drawershow2 = false
      },
      dodel (row, val) {
        if (val === 2) {
          doDelactworld({
            id: row.id
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('删除成功!')
              this.getWorldList()
            } else {
              this.$message.error(res.mag)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          doDelHeadline({
            id: row.id
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('删除成功!')
              this.getHeadlineList()
            } else {
              this.$message.error(res.mag)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      dosubmit (val) {
        this.btnloading = true
        // console.log(this.form)
        if (val === 2) {
          if (!this.form2.id) {
            if (
              this.form2.keyWord !== '' &&
              this.form2.keyWord_b !== ''
            ) {
              doaddactworld(this.form2).then(res => {
                console.log(res)
                if (res.code === 200) {
                  this.$message.success('添加成功!')
                  this.getWorldList()
                  this.drawershow2 = false
                  this.form2 = {}
                  this.btnloading = false
                } else {
                  this.btnloading = false
                  this.$message.error(res.msg)
                }
              }).catch(err => {
                console.log(err)
              })
            } else {
              this.btnloading = false
              this.$message.info('请检查所填内容!')
            }
          } else {
            doUpdateactworld(this.form2).then(res => {
              // console.log(res)
              if (res.code === 200) {
                this.$message.success('修改成功!')
                this.getWorldList()
                this.drawershow2 = false
                this.form2 = {}
                this.btnloading = false
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        } else {
          if (!this.form.id) {
            if (
              this.form.title !== ''
            ) {
              doaddteminfo(this.form).then(res => {
                console.log(res)
                if (res.code === 200) {
                  this.$message.success('添加成功!')
                  this.getHeadlineList()
                  this.drawershow = false
                  this.form = {}
                  this.btnloading = false
                } else {
                  this.btnloading = false
                  this.$message.error(res.msg)
                }
              }).catch(err => {
                console.log(err)
              })
            } else {
              this.btnloading = false
              this.$message.info('请填写标题!')
            }
          } else {
            doEditHeadline(this.form).then(res => {
              // console.log(res)
              if (res.code === 200) {
                this.$message.success('修改成功!')
                this.getHeadlineList()
                this.drawershow = false
                this.form = {}
                this.btnloading = false
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      },
      getHeadlineList () {
        this.loading = true
        getHeadlineList()
          .then(res => {
            console.log(res)
            this.activity = res.data.data
            //  this.count = res.data.count
            // const pagination = {
            //   ...this.pagination
            // }
            // pagination.total = res.data.count
            // this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      getWorldList () {
        this.loading2 = true
        getWorldList()
          .then(res => {
            console.log(res)
            this.activity2 = res.data.data
            //  this.count = res.data.count
            // const pagination = {
            //   ...this.pagination
            // }
            // pagination.total = res.data.count
            // this.pagination = pagination
            this.loading2 = false
          })
          .catch(err => {
            console.log(err)
          })
      }
      // handleTableChange (pagination, filters) {
      //   // console.log(pagination)
      //   const pager = {
      //     ...this.pagination
      //   }
      //   pager.current = pagination.current
      //   this.pagination = pager
      //   this.fetch({
      //     results: pagination.pageSize,
      //     page: pagination.current,
      //     ...filters
      //   })
      // },
      // fetch (params = {}) {
      //   // console.log('params:', params)
      //   this.loading = true
      //   this.getHeadlineList(params.page, 15)
      // }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .headline {
    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-btn {
      border-radius: 4px;
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      /*margin-bottom: 15px;*/
      font-weight: 600;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-tbody {
      font-size: 13px;
    }
  }
</style>
